<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>毕业生满意度调查</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
          <el-row :gutter="20">

            <el-col :span="5" style="margin-top:10px" >
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">就业满意度:<span class="zitiii">{{(manyi/userlist.length)*100}}%</span></span>
          </el-card>
        </el-col>

            <el-col :span="5" style="margin-top:10px" >
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">专业匹配度:<span class="zitiii">{{(en/userlist.length)*100}}%</span></span>
          </el-card>
        </el-col>

          </el-row>
      </div>

      <div>
          <el-row :gutter="24">
              <el-col :span="6" style="margin-top:10px"  v-for="item in userlist " :key="item.id">
                  <el-card shadow="hover">
                      <div class="touxiang">
                           <el-avatar icon="el-icon-user-solid"></el-avatar>
                      </div>
                      <div class="name">
                          <span >{{item.name}}</span>
                      </div>
                      <div class="name1">
                          <span >是否满意当前工作:<span class="wenzi">{{item.manyi}}</span></span>
                      </div>
                     <div class="name1">
                          <span >工作是否与专业匹配:<span class="wenzi">{{item.pipei}}</span></span>
                      </div>
                    <div class="name2">
                          <span class="name1">详细说明:</span><span>{{item.xiangxi}}</span>
                      </div>
                  </el-card>
              </el-col>
          </el-row>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            userlist:[],
            manyi:0,
            bumanyi:0,
            en:0
        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        getUserList(){
          this.$http.get('/getlist').then(res=>{

       this.userlist=res.data

        for(let i in this.userlist){
          console.log(231);
        if(this.userlist[i].manyi == '满意'){
          this.manyi++
        }else{
          this.bumanyi++
        }
      }
    for(let i in this.userlist){
          console.log(231);
        if(this.userlist[i].pipei == '是'){
          this.en++
        }
      }
      })
     },

    },
}
</script>

<style>
.name{
    font-size: 20px;
    margin: auto;
}
.name1{
    margin-top: 10px;
    font-weight: bold;
}
.name2{
    margin-top: 10px;
}
.wenzi{
    color: red;
}
</style>